<template>
  <div>
    <van-nav-bar
      title="订单详情"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="order-box">
      <div class="order-stauts">
        <p><span>订单状态: </span>{{ statusString }}</p>
        <p><span>订单编号: </span>{{ orderList.order_no }}</p>
        <p><span>下单时间: </span>{{ orderList.updated_at }}</p>
        <van-button
          type="primary"
          style="width: 100%"
          @click="gopay"
          v-if="orderList.status === 1"
          >去支付</van-button
        >
        <van-button
          type="primary"
          style="width: 100%"
          @click="confirmPay"
          v-if="orderList.status === 3"
          >确认订单</van-button
        >
      </div>
      <div class="order-price">
        <p>
          <span>商品金额: </span><small>￥</small>{{ orderList.amount + '.00' }}
        </p>
        <p><span>配送方式: </span>普通快递</p>
      </div>
      <div class="order-list">
        <van-card
          v-for="item in orderList.orderDetails.data"
          :key="item.id"
          :num="item.num"
          :price="item.price.toFixed(2)"
          desc="全场包邮"
          :title="item.goods.title"
          :thumb="item.goods.cover_url"
        />
      </div>
    </div>
    <van-popup
      v-model:show="showPay"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="pay">
        <div style="width: 50%">
          <p>支付宝二维码</p>
          <img v-lazy="aliyun" alt="" style="padding: 10px 20px 0" />
        </div>
        <div style="width: 50%">
          <p>微信二维码</p>
          <img v-lazy="wechat" alt="" style="padding: 10px 20px 0" />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { computed, onMounted, reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getOrderInfo, payCode, payStatus, confirmToke } from '../../network/order'
import { Toast, Dialog } from 'vant'
export default {
  setup () {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      orderId: 0,
      orderList: {
        orderDetails: {
          data: []
        },
        status: 0
      },
      showPay: false,
      aliyun: '',
      wechat: ''
    })
    const init = () => {
      Toast.loading({ message: '加载中...', forbidClick: true })
      getOrderInfo(state.orderId, { include: 'orderDetails.goods' }).then(res => {
        console.log(res)
        state.orderList = res
        Toast.clear()
      })
    }
    onMounted(() => {
      state.orderId = route.query.id
      init()
    })
    const statusString = computed(() => {
      const status = ['', '已下单', '已支付', '等待发货', '确认收货', '已过期']
      return status[state.orderList.status]
    })
    const gopay = () => {
      state.showPay = true
      payCode(state.orderId, { type: 'aliyun' }).then(res => {
        console.log(res)
        state.aliyun = res.qr_code_url
        state.wechat = res.qr_code_url
      })
      const time = setInterval(() => {
        payStatus(state.orderId).then(res => {
          if (res === 2) {
            clearInterval(time)
            router.push({ path: '/orderdetail', query: { id: state.orderId } })
          }
        })
      }, 2000)
    }
    const confirmPay = () => {
      Dialog.confirm({
        message: '是否确认订单'
      }).then(() => {
        confirmToke(state.orderId).then(res => {
          Toast('确认成功')
          init()
        })
      })
    }
    const goBack = () => {
      router.go(-1)
    }
    return {
      ...toRefs(state),
      goBack,
      statusString,
      gopay,
      confirmPay
    }
  }
}
</script>
<style scoped lang="less">
.order-box {
  background-color: #f7f7f7;
  .order-stauts {
    padding: 20px 20px 30px;
    background-color: #fff;
    margin-bottom: 20px;
    font-size: 15px;
  }
  p {
    text-align: left;
    margin-bottom: 15px;
    span {
      color: #999;
    }
  }
  .order-price {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 20px;
  }
  .order-list {
    text-align: left;
  }
}
.pay {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
</style>
